<template>
  <div>
    <!-- 添加抽屉 -->
    <a-drawer :title="title" :placement="placement" width="580px" :visible="visible" @close="onClose">
      <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item
          ref="name"
          label="规则名称"
          prop="name"
          :rules="{
            required: true,
            message: '请输入'
          }"
          ><a-input style="width: 220px" placeholder="请输入" v-model="form.name"
        /></a-form-model-item>
      </a-form-model>
      <div style="margin-top: 20px">
        <div class="shu">
          <div class="shuxian"></div>
          <div style="color: #000000; font-size: 16px; margin-left: 10px">具体规则</div>
        </div>
      </div>
      <!-- 工时抽成 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div>
        <div>
          <a-checkbox :checked="checked3" @change="onChange3" style="margin-top: 15px">
            渠道分润
          </a-checkbox>
        </div>
        <a-radio-group v-if="checked3" v-model="ruleType" style="margin-top: 20px" @change="tabsChange">
          <a-radio-button value="1" style="width: 104px; text-align: center">
            工时分润
          </a-radio-button>
          <a-radio-button value="4" style="width: 104px; text-align: center">
            按天分润
          </a-radio-button>
          <a-radio-button value="5" style="width: 104px; text-align: center">
            比例分润
          </a-radio-button>
        </a-radio-group>
        <div v-if="checked3" style="margin-top: 20px">
          <div style="display: flex; margin-bottom: 20px">
            <div v-if="ruleType === '5'">
              <a-input-number
                style="width: 88px; margin-left: 5px"
                :min="0"
                :max="100"
                :step="0.01"
                :precision="2"
                v-model="form.commissionRatio"
              />
              %工人实发工资
            </div>
            <div v-else>
              工价
              <a-input-number style="width: 88px; margin: 0 5px" :min="0" v-model="form.hourAmountDouble" />
              {{ ruleType === "1" ? "元/小时" : "元/天" }}
            </div>
            <div style="margin-left: 20px" v-if="ruleType !== '5'">
              <a-dropdown>
                <a-menu slot="overlay" @click="handleMenuClick2">
                  <a-menu-item key="2">
                    {{ ruleType === "1" ? "按月/天/工时变更工时抽成" : "按月/天变更抽成" }}
                  </a-menu-item>
                  <a-menu-item key="1">{{ ruleType === "1" ? "固定日期变更工时抽成" : "固定日期变更抽成" }} </a-menu-item>
                </a-menu>
                <a-button type="primary" ghost
                  ><a-icon type="plus" />
                  新增变更条件
                </a-button>
              </a-dropdown>
            </div>
          </div>
          <div style="margin-top: 10px; display: flex; align-items: center" v-for="(item, index) in changeList" :key="index">
            <div v-if="item.type === '2'">
              入职满
              <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
              <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
                <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
              <span>
                抽成变为
                <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
                {{ ruleType === "1" ? "元/小时" : "元/天" }}
              </span>
            </div>
            <div v-if="item.type === '1'">
              自
              <a-date-picker v-model="item.time" style="margin: 0 5px" />
              抽成变为
              <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
              {{ ruleType === "1" ? "元/小时" : "元/天" }}
            </div>
            <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteChangeList(item, index)" />
          </div>
        </div>
      </div>
      <!-- 一次性红包 ！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div>
        <a-checkbox :checked="checked" @change="onChange" style="margin-top: 15px">
          一次性红包
        </a-checkbox>
        <div style="margin-top: 10px" v-for="(item, index) in numList" :key="index">
          满
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
          <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
            <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          发放
          <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.redPacketAmount" />
          元红包
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteNumList(item, index)" />
          <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin-left: 10px" @click="createNumList" />
        </div>
      </div>
      <!-- 离职倒扣！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ -->
      <div>
        <div>
          <a-checkbox :checked="checked1" @change="onChange1" style="margin-top: 15px">
            离职倒扣
          </a-checkbox>
        </div>
        <div style="margin: 15px 0" v-if="checked1">
          <a-dropdown>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                {{ ruleType === "1" ? "不满月/天/工时倒扣工资" : "不满月/天倒扣工资" }}
              </a-menu-item>
              <a-menu-item key="2">
                {{ ruleType === "1" ? "不满月/天/工时减少工价" : "不满月/天减少工价" }}
              </a-menu-item>
            </a-menu>
            <a-button type="primary" ghost
              ><a-icon type="plus" />
              新增倒扣条件
            </a-button>
          </a-dropdown>
        </div>
        <div style="margin-top: 10px" v-for="(item, index) in leaveList" :key="index">
          不满
          <a-input-number :min="0" style="width: 88px; margin: 0 5px" v-model="item.number" />
          <a-select style="width: 108px; margin: 0 5px" v-model="item.units">
            <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
          <span v-if="item.type === '1'">
            倒扣
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.deductAmount" />
            元工资
          </span>
          <span v-if="item.type === '2'">
            工价变为
            <a-input-number style="width: 88px; margin: 0 5px" :min="1" v-model="item.newHourAmount" />
            {{ ruleType === "1" ? "元/小时" : "元/天" }}
          </span>
          <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteLeaveList(item, index)" />
        </div>
      </div>
      <!-- 其他费用 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
      <div>
        <div>
          <a-checkbox :checked="checked2" @change="onChange2" style="margin-top: 15px">
            其他费用
          </a-checkbox>
        </div>
        <div v-if="checked2" style="margin-top: 20px; margin-bottom: 40px">
          <span>
            只要工人在职，额外结算
            <a-input-number style="width: 88px; margin: 0 5px" :min="0" :step="0.01" :precision="2" v-model="form.specialCost" />
            元/每月
          </span>
        </div>
      </div>
      <div class="drawer-footer-box">
        <a-button :style="{ marginRight: '12px' }" @click="onClose"> 取消 </a-button>
        <a-button type="primary" html-type="submit" @click="handleAddOK">确定</a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import moment from "moment";
import { addRules } from "@/api/outsourcing/outsourcing";
export default {
  data() {
    return {
      form: {},
      ruleType: "1",
      option: [
        {
          label: "工时",
          value: 1
        },
        {
          label: "月",
          value: 2
        },
        {
          label: "天",
          value: 3
        }
      ],
      title: "",
      placement: "right",
      checked: false,
      checked1: false,
      checked2: false,
      checked3: false,
      visible: false,
      changeList: [],
      numList: [],
      leaveList: [],
      goOnState1: true,
      goOnState2: true,
      goOnState3: true,
      goOnState4: true,
      goOnState5: true,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    };
  },
  methods: {
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
      } else {
        return 0;
      }
    },
    tabsChange(e) {
      var name = this.form.name;
      this.form = {};
      this.$set(this.form, "name", name);
      // this.form.hourAmountDouble = null;
      // this.form.commissionRatio = null;
      // this.form.specialCostDouble = null;
      this.onChange({ target: { checked: false } });
      this.onChange1({ target: { checked: false } });
      this.onChange2({ target: { checked: false } });
      // this.onChange3({ target: { checked: false } });
      if (e.target.value === "1" || e.target.value === "5") {
        this.option = [
          {
            label: "月",
            value: 1
          },
          {
            label: "天",
            value: 2
          },
          {
            label: "工时",
            value: 3
          }
        ];
      }
      if (e.target.value === "4") {
        this.option = [
          {
            label: "月",
            value: 1
          },
          {
            label: "天",
            value: 3
          }
        ];
      }
    },
    // 新增规则
    handleAddOK() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.changeList.forEach((item, index) => {
            if (item.time) {
              item.time = moment(item.time).format("YYYY-MM-DD");
            }
          });
          const changeList = JSON.parse(JSON.stringify(this.changeList)); // 工价数组
          const leaveList = JSON.parse(JSON.stringify(this.leaveList)); // 倒扣数组
          changeList.map(item => {
            item.type = Number(item.type);
          });
          leaveList.map(item => {
            item.type = Number(item.type);
          });
          this.form.hourAmountRule = JSON.parse(JSON.stringify(changeList));
          this.form.redPacketRule = this.numList;
          this.form.leaveOfficeRule = leaveList;
          if (this.form.hourAmountRule.length > 0) {
            this.form.hourAmountRule.forEach((item, index) => {
              if (item.type === "1") {
                if (item.newHourAmount === null || item.time === null || item.newHourAmount === undefined || item.time === undefined) {
                  this.$message.error("固定日期变更规则内容都为必填");
                  this.goOnState1 = false;
                } else {
                  this.goOnState1 = true;
                }
              }
              if (item.type === "2") {
                if (
                  item.newHourAmount === null ||
                  item.units === null ||
                  item.number === null ||
                  item.newHourAmount === undefined ||
                  item.units === undefined ||
                  item.number === undefined
                ) {
                  this.$message.error("按月/天/工时变更规则内容都为必填");
                  this.goOnState2 = false;
                } else {
                  this.goOnState2 = true;
                }
              }
            });
          }
          if (this.form.redPacketRule.length > 0) {
            this.form.redPacketRule.forEach((item, index) => {
              if (
                item.redPacketAmount === null ||
                item.units === null ||
                item.number === null ||
                item.redPacketAmount === undefined ||
                item.units === undefined ||
                item.number === undefined
              ) {
                this.$message.error("一次性红包规则内容都为必填");
                this.goOnState3 = false;
              } else {
                this.goOnState3 = true;
              }
            });
          }
          if (this.form.leaveOfficeRule.length > 0) {
            this.form.leaveOfficeRule.forEach((item, index) => {
              if (item.type === "1") {
                if (
                  item.number === null ||
                  item.units === null ||
                  item.deductAmount === null ||
                  item.number === undefined ||
                  item.units === undefined ||
                  item.deductAmount === undefined
                ) {
                  this.$message.error("倒扣工资规则内容都为必填");
                  this.goOnState4 = false;
                } else {
                  this.goOnState4 = true;
                }
              }
              if (item.type === "2") {
                if (
                  item.number === null ||
                  item.units === null ||
                  item.newHourAmount === null ||
                  item.number === undefined ||
                  item.units === undefined ||
                  item.newHourAmount === undefined
                ) {
                  this.$message.error("减少工价规则内容都为必填");
                  this.goOnState5 = false;
                } else {
                  this.goOnState5 = true;
                }
              }
            });
          }

          if (
            this.title === "新增招工劳务费规则" &&
            this.goOnState1 === true &&
            this.goOnState2 === true &&
            this.goOnState3 === true &&
            this.goOnState4 === true &&
            this.goOnState5 === true
          ) {
            this.form.specialCostDouble = this.form.specialCost;
            addRules({
              ruleType: 2,
              ...this.form,
              showType: this.ruleType === "4" ? 1 : this.ruleType === "5" ? 3 : 2
            }).then(res => {
              this.$message.success("添加成功");
              this.$emit("fatherMethod");
              this.visible = false;
            });
          }
        }
      });
    },
    onClose() {
      this.visible = false;
    },
    // 日期选择器变化
    dateChange() {},
    // 添加事件
    onCreate() {
      this.title = "新增招工劳务费规则";
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate();
        this.form = {};
        this.changeList = [];
        this.numList = [];
        this.leaveList = [];
        this.checked = false;
        this.checked1 = false;
        this.checked2 = false;
        this.checked3 = false;
      });
    },
    // 一次性红包添加事件
    onChange(e) {
      if (e.target.checked) {
        this.numList.push({ number: null, units: null, redPacketAmount: null });
        this.checked = true;
      } else {
        this.numList = [];
        this.checked = false;
      }
    },
    // 离职倒扣
    onChange1(e) {
      if (e.target.checked) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
        this.leaveList = [];
      }
    },
    // 其他费用
    onChange2(e) {
      if (e.target.checked) {
        this.checked2 = true;
      } else {
        this.checked2 = false;
        this.form.specialCost = 0;
      }
    },
    // 工时抽成
    onChange3(e) {
      if (e.target.checked) {
        this.checked3 = true;
      } else {
        this.checked3 = false;
        this.changeList = [];
      }
    },
    createNumList() {
      this.numList.push({ number: null, units: null, redPacketAmount: null });
    },
    // 删除发放红包项
    deleteNumList(item, index) {
      this.numList.splice(index, 1);
      if (this.numList.length === 0) {
        this.checked = false;
      }
    },
    // 新增倒扣条件
    handleMenuClick(e) {
      if (e.key === "1") {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          deductAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 新增变更条件
    handleMenuClick2(e) {
      if (e.key === "1") {
        this.changeList.push({
          type: e.key,
          newHourAmount: null,
          time: null
        });
      } else {
        this.changeList.push({
          type: e.key,
          number: null,
          units: null,
          newHourAmount: null
        });
      }
    },
    // 删除离职倒扣项
    deleteLeaveList(item, index) {
      this.leaveList.splice(index, 1);
      if (this.leaveList.length === 0) {
        this.checked1 = false;
      }
    },
    // 删除变更条件
    deleteChangeList(item, index) {
      this.changeList.splice(index, 1);
      if (this.changeList.length === 0) {
        this.checked3 = false;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 20px;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.deleteIcon:hover {
  color: #fa5051;
}
.addIcon {
  color: var(--primary);
}
</style>
